
 <template>
<div class="wrapper">
<div class="navtop clearfix">
<h1 class="nav-title">游戏管理后台<b></b></h1>
<div class="navmenu"  id='cssmenu'>
<div id="menu-line" style="width: 76px; left: 0px;"></div>
<ul class="navmenu-item">
   <li class="active"><a href="index.html">单服数据</a></li>
   <li><a href="index2.html">数据汇总</a></li>
   <li><a href="index3.html">运营功能</a></li>
   <li><a href="index4.html">服务器管理</a></li>
   <li><a href="index5.html">监控系统</a></li>
   <li><a href="">系统设置</a></li>
   <li><a href="">开发工具</a></li>
</ul>
</div>
<div class="nav-right">
Hi! <span class="user-item" @click="HandleUserContent">admin<i class="fa fa-angle-down" aria-hidden="true"></i>
	<span class="user-con" :style="{display:userContentDisplay}">
		<a href="" class="a1">账号修改</a>
		<a href="" class="a2">安全退出</a>
	</span>
</span>
</div>
</div>
<!--导航 end-->
<div class="Business-back">
<div class="Business-left left_0 transition clearfix">
<div class="Website-nav">
 网站导航<div class="Slide-left transition"><i class="fa fa-outdent" aria-hidden="true"></i>
</div></div>

<ul class="list-unstyled left-Catalog" id="boxscroll">
   <li class="nav-toggle"  v-for="(item, index) in leftMenus" :key="index" @click="toggleVisibility(index)"><span class="nav-open"   ><i class="fa fa-bar-chart" aria-hidden="true"></i>  {{ item.name }}</span>
      <ul class="list-unstyled leftnav-view"  v-if="item.isVisible">
         <li v-for="item1 in item.content"><a class="J_menuItem" href="serveroverview.html">{{item1.name}}</a></li>
         
      </ul>
   </li>
</ul>
</div>
<!--左边 end-->
  <div class="Business-right transition clearfix">
 <!-- <iframe id="J_iframe" class="iframe-box" name="J_iframe" width="100%" height="100%" src="1.html" frameborder="0" data-id="index"></iframe> -->
  </div>
</div>
</div>
 </template>
 <script>
import '@/assets/css/font-awesome.min.css'


export default {
  data(){
    return {
        userContentDisplay:"none",
        isVisible: true,
        //接口获取数据    
        leftMenus: [
            { name: '数据概要', content: [{name:'服务器概况'},{name:'每日汇总'}], isVisible: true },
            { name: '充值数据', content: [{name:'充值列表'},{name:'充值分析'}], isVisible: true },
            { name: '在线数据', content: [{name:'当前在线'},{name:'在线分析'}], isVisible: true },
            { name: '用户信息', content:  [{name:'角色列表'},{name:'每日汇总'}], isVisible: true },
            { name: '数据分析', content: [{name:'留存数据'},{name:'活跃分析'},{name:'消费分析'},{name:'游戏排行榜'}], isVisible: true }
      ]
    }
  },
  methods: {
    HandleUserContent() {
      console.log('按钮被点击了');
       if(this.userContentDisplay=="none"){
         this.userContentDisplay="inline-block";
       }else{
        this.userContentDisplay="none"
       }
    
    
    },
    toggleVisibility(index) {
        this.leftMenus[index].isVisible = !this.leftMenus[index].isVisible
    }
  }
}
</script>
 <style>
 .wrapper {
    width: 100%;
    height: 100%;
    position: relative;
}
 .navtop {
    width: 100%;
    height: 60px;
    position: relative;
    background-color: #1278f6;
}
 
.nav-title {
    margin: 0;
    color: #fff;
    font-size: 18px;
    float: left;
    line-height: 60px;
    font-weight: bold;
    width: 160px;
    text-align: center;
    position: relative;
    margin-right: 20px;
}

.nav-title b {
    margin-right: 5px;
    height: 42px;
    width: 1px;
    display: inline-block;
    vertical-align: middle;
    background: #fff;
    position: absolute;
    right: -4px;
    top: 10px;
}

 
.navmenu {
    line-height: 1;
    float: left;
    position: relative;
    height: 60px;
} 



#menu-line {
    position: absolute;
    bottom: 0;
    left: 0;
    height: 4px;
    background: #fff;
    -webkit-transition: all 0.25s ease-out;
    -moz-transition: all 0.25s ease-out;
    -ms-transition: all 0.25s ease-out;
    -o-transition: all 0.25s ease-out;
    transition: all 0.25s ease-out;
}
.navmenu #menu-button {
    display: none;
}

.navmenu, .navmenu ul, .navmenu ul li, .navmenu ul li a, .navmenu #menu-button {
    margin: 0;
    padding: 0;
    border: 0;
    list-style: none;
    line-height: 1;
    display: block;
    position: relative;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

.navmenu > ul > li {
    float: left;
}

.navmenu > ul > li > a {
    padding: 23px 10px;
    font-size: 14px;
    text-decoration: none;
    text-transform: uppercase;
    color: #d0eae9;
    -webkit-transition: color .2s ease;
    -moz-transition: color .2s ease;
    -ms-transition: color .2s ease;
    -o-transition: color .2s ease;
    transition: color .2s ease;
}
.navmenu > ul > li.active > a {
    color: #fff;
    font-weight: 600;
}

.nav-right {
    float: right;
    color: #eff4fe;
    font-size: 14px;
    line-height: 60px;
}
.nav-right .user-item {
    position: relative;
    cursor: pointer;
    margin-left: 10px;
}
.nav-right .user-item .fa-angle-down {
    font-size: 22px;
    margin: 2px 30px 0 10px;
    vertical-align: middle;
}

.fa {
    display: inline-block;
    font: normal normal normal 14px/1 FontAwesome;
    font-size: inherit;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
.fa-angle-down:before {
    content: "\f107";
}

.nav-right .user-con {
    width: 100px;
    height: 52px;
    -webkit-box-shadow: 0 1px 5px rgb(0 0 0 / 20%);
    box-shadow: 0 1px 5px rgb(0 0 0 / 20%);
    border-radius: 3px;
    background: #fff;
    position: absolute;
    top: 23px;
    right: 35px;
    display: none;
    z-index: 99999;
}

 
.nav-right .user-con a.a1 {
    border-top-left-radius: 3px;
    border-top-right-radius: 3px;
}

.nav-right .user-con a.a2 {
    border-bottom-right-radius: 3px;
    border-bottom-left-radius: 3px;
}
.nav-right .user-con a {
    height: 26px;
    line-height: 26px;
    width: 100%;
    text-align: center;
    color: #787a7d;
    font-size: 12px;
    display: block;
}




.Website-nav {
    height: 38px;
    line-height: 38px;
    color: #323437;
    font-size: 15px;
    position: relative;
    text-indent: 20px;
    border-bottom: 1px solid #ccc;
}

.Website-nav .Slide-left {
    width: 30px;
    cursor: pointer;
    text-indent: 0;
    height: 30px;
    position: absolute;
    right: 14px;
    top: -1px;
    text-align: center;
    z-index: 999;
}

.Website-nav .fa-outdent {
    font-size: 18px;
    vertical-align: middle;
}


.Business-left select.form-control {
    width: 140px;
    margin: 10px auto 0;
    padding: 0 5px;
}
.form-control, .single-line {
    display: block;
    border-color: #cfdadd;
    border-radius: 2px;
    width: 100%;
    height: 30px;
    padding: 0 5px;
    font-size: 14px;
    line-height: 1.42857143;
    color: #555;
    background-color: #fff;
    background-image: none;
    border: 1px solid #cfdadd;
    box-shadow: none;
    -webkit-transition: border-color ease-in-out .15s, -webkit-box-shadow ease-in-out .15s;
    -o-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
    transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
}

.Business-left .left-Catalog {
    margin-top: 10px;
    color: #333;
}
.Business-left .left-Catalog .nav-toggle {
    color: #323437;
    text-indent: 5px;
    cursor: pointer;
}
.Business-left .left-Catalog .nav-toggle .nav-open {
    display: block;
    width: 100%;
    height: 32px;
    line-height: 32px;
}
.list-unstyled {
    padding-left: 0;
    list-style: none;
}
.Business-left .left-Catalog li {
    line-height: 32px;
}

.Business-left .left-Catalog li a {
    color: #666;
    font-weight: normal;
    padding-left: 24px;
}


.Business-back .Business-left, .Business-back .Business-right {
    height: 100%;
}

.Business-back .Business-left {
    width: 160px;
    position: absolute;
    background: #fbfbfb;
    border: 1px solid #ccc;
    border-top: none;
}
</style>